import Vue from 'vue'
import bus from '@/components/storybook/utilties/bus'

export const NameTemplate = Vue.component('NameTemplate', {
  template: `
      <el-link :underline="false" @click="onDraw">{{$data.data.name}}</el-link>
    `,
  methods: {
    onDraw() {
      bus.$emit('event:draw', this.$data.data)
    }
  }
})

export const ReadyTemplate = Vue.component('ReadyTemplate', {
  template: `
      <el-link size="mini" :underline="false"  :type="Number($data.data.ready)>0 ? 'danger':'primary'"  @click="onSelect">{{$data.data.ready}}</el-link>
    `,

  methods: {
    onSelect() {
      bus.$emit('event:select-ready', this.$data.data)
    }
  }
})
export const ReceivedTemplate = Vue.component('ReceivedTemplate', {
  template: `
      <el-link size="mini" :underline="false" :type="$data.data.received>0 ? 'danger':'primary'"  @click="onSelect">{{$data.data.received}}</el-link>
    `,

  methods: {
    onSelect() {
      bus.$emit('event:select-received', this.$data.data)
    }
  }
})
export const ReadTemplate = Vue.component('ReadTemplate', {
  template: `
      <el-link size="mini" :underline="false" type="primary"  @click="onSelect">{{$data.data.read}}</el-link>
    `,

  methods: {
    onSelect() {
      bus.$emit('event:select-read', this.$data.data)
    }
  }
})
export const EscalationTemplate = Vue.component('EscalationTemplate', {
  template: `
      <el-switch  :value="$data.data.escalation" size="mini"  @change="onSelect" :disabled="$data.data.enable===false || $data.data.alert===false"></el-switch>
    `,

  methods: {
    onSelect(value) {
      bus.$emit('event:change-switch', {
        item: this.$data.data,
        value,
        type: 'escalation'
      })
    }
  }
})
export const EnableTemplate = Vue.component('EnableTemplate', {
  template: `
      <el-switch :value="$data.data.enable" size="mini"  @change="onSelect" ></el-switch>
    `,

  methods: {
    onSelect(value) {
      bus.$emit('event:change-switch', {
        item: this.$data.data,
        value,
        type: 'enable'
      })
    }
  }
})
export const AlertTemplate = Vue.component('AlertTemplate', {
  template: `
      <el-switch  :value="$data.data.alert" size="mini"  @change="onSelect" :disabled="$data.data.enable == false"></el-switch>
    `,

  methods: {
    onSelect(value) {
      bus.$emit('event:change-switch', {
        item: this.$data.data,
        value,
        type: 'alert'
      })
    }
  }
})

export const JiraTemplate = Vue.component('JiraTemplate', {
  template: `
      <el-link  size="mini" :underline="false" type="success"  :href="href"  target="_blank">{{$data.data.jiraNumber}}</el-link>
    `,
  computed: {
    href() {
      const jiraNumber = this.$data.data.jiraNumber || 'NA'

      if (jiraNumber.indexOf('http') === -1) {
        return `https://jira.mspbots.ai/browse/${jiraNumber}`
      }

      return jiraNumber
    }
  }
})
export const EnableHeaderTemplate = Vue.component('EnableHeaderTemplate', {
  template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content='That which sets off an action.  Switching this on enables the bot to generate messages. You can view these messages in the message dashboard. Generated messages will be in “ready” status.' placement="top">
      <span>Trigger</span>
    </el-tooltip>
    `
})
export const AlertHeaderTemplate = Vue.component('AlertHeaderTemplate', {
  template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content="Generated messages intended for end-users.  Switching this on enables the bot to send these messages to intended recipients/users." placement="top">
      <span>Alert</span>
    </el-tooltip>
    `
})
export const EscalationHeaderTemplate = Vue.component(
  'EscalationHeaderTemplate',
  {
    template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content="The bot will pass on or escalate the message to the user's managers depending on the escalation settings.  Escalation is triggered when the same issue has happened to the user repeatedly. " placement="top">
      <span >Escalate</span>
    </el-tooltip>
    `
  }
)
export const ReadyHeaderTemplate = Vue.component('ReadyHeaderTemplate', {
  template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content='This counts the number of messages that the bot has generated but have stayed in the “ready” status in the last 7 days.  Meaning, the messages have not been sent to the intended recipients/users.' placement="top">
      <span >Ready</span>
    </el-tooltip>
    `
})
export const ReceivedHeaderTemplate = Vue.component('ReceivedHeaderTemplate', {
  template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content="This counts the number of messages that the users have received but have not read yet." placement="top">
      <span>Received</span>
    </el-tooltip>
    `
})
export const ReadHeaderTemplate = Vue.component('ReadHeaderTemplate', {
  template: `
    <el-tooltip :open-delay="1000" class="item" effect="dark" content="This counts the number of messages the users have read.  Meaning, the intended recipients/users received and read the messages/alerts." placement="top">
      <span >Read</span>
    </el-tooltip>
    `
})

export const RenderName = () => {
  return {
    template: NameTemplate
  }
}

export const RenderJira = () => {
  return {
    template: JiraTemplate
  }
}
export const RenderRead = () => {
  return {
    template: ReadTemplate
  }
}
export const RenderReceived = () => {
  return {
    template: ReceivedTemplate
  }
}
export const RenderReady = () => {
  return {
    template: ReadyTemplate
  }
}
export const RenderEscalation = () => {
  return {
    template: EscalationTemplate
  }
}
export const RenderEnable = () => {
  return {
    template: EnableTemplate
  }
}
export const RenderAlert = () => {
  return {
    template: AlertTemplate
  }
}
export const RenderEnableHeader = () => {
  return {
    template: EnableHeaderTemplate
  }
}
export const RenderAlertHeader = () => {
  return {
    template: AlertHeaderTemplate
  }
}
export const RenderEscalationHeader = () => {
  return {
    template: EscalationHeaderTemplate
  }
}
export const RenderReadyHeader = () => {
  return {
    template: ReadyHeaderTemplate
  }
}
export const RenderReceivedHeader = () => {
  return {
    template: ReceivedHeaderTemplate
  }
}
export const RenderReadHeader = () => {
  return {
    template: ReadHeaderTemplate
  }
}
